<style type="text/css">
    .form-box {
        padding: 20px 20px 0 0;
    }
</style>
<div id="layui-container" class="layui-anim layui-anim-downbit">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script id="item-form" type="text/html">
    <div class="form-box">
        <form id="form-item" lay-filter="formItem" class="layui-form">
            <input type="hidden" name="id" value="{{ d.id || '' }}"/>
            <div class="layui-form-item">
                <label class="layui-form-label required">操作项名称</label>
                <div class="layui-input-block">
                    <input type="text" name="operaName" lay-verify="required" placeholder="操作项名称"
                           class="layui-input" value="{{ d.operaName || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">icon图标</label>
                <div class="layui-input-block">
                    <input type="text" name="iconType" lay-verify="required" placeholder="icon图标"
                           class="layui-input" value="{{ d.iconType || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序号</label>
                <div class="layui-input-block">
                    <input type="text" name="sortCode" placeholder="排序号"
                           class="layui-input" value="{{ d.sortCode || '1' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">Spring Bean</label>
                <div class="layui-input-block">
                    <input type="text" name="showStatusLogic" placeholder="Spring Bean"
                           class="layui-input" value="{{ d.showStatusLogic || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">跳转页面</label>
                <div class="layui-input-block">
                    <input type="text" name="pageUrl" placeholder="Spring Bean"
                           class="layui-input" value="{{ d.pageUrl || '' }}"/>
                </div>
            </div>
        </form>
    </div>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="openDialog">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteItems">删除</button>
    </div>
</script>
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="openDialog">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteItems">删除</a>
</script>

<script type="text/javascript" src="lib/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    layui.use(['form', 'table', 'laytpl'], function () {
        let form = layui.form;
        let table = layui.table;
        let laytpl = layui.laytpl;

        let flag = false;

        let tableIns = table.render({
            elem: '#test',
            url: api.pageConsoleNode,
            method: 'post',
            contentType: 'application/json',
            //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cellMinWidth: 80,
            page: true,
            limit: 20,
            limits: [20, 40, 80],
            cols: [[
                {type: "checkbox", width: 50},
                {field: '', title: '序号', type: 'numbers'},
                {field: 'id', title: 'ID'},
                {field: 'operaName', title: '操作项名称'},
                {field: 'iconType', title: 'icon图标', width: 150},
                {field: 'pageUrl', title: '前端路由'},
                {field: 'showStatusLogic', title: 'Spring Bean', width: 200},
                {field: 'sortCode', title: '排序号', width: 100},
                {title: '操作', templet: '#tableBar', width: 200}
            ]],
            toolbar: '#toolbarDemo',
            defaultToolbar: false,
            request: {
                pageName: "currentPage",
                limitName: "pageSize"
            }
        });

        let active = {
            openDialog: function (data) {
                if (!data) {
                    data = {};
                }
                let tpl = document.getElementById("item-form").innerHTML;
                laytpl(tpl).render(data, function (html) {
                    layer.open({
                        type: 1,
                        content: html,
                        title: '标段操作台节点信息',
                        area: ['435px', '420px'],
                        maxmin: false,
                        shade: 0.3,
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            let load = layer.load();
                            request.bodyAjax(api.consoleNodeSaveOrUpdate, form.val('formItem'), function (res) {
                                layer.close(load);
                                if (res.status === 200) {
                                    tableIns.reload();
                                }
                                layer.close(index);
                                layer.msg(res.message);
                            });
                            return false;
                        }
                    });
                });
                return form.render();
            },
            deleteItems: function (data) {
                let ids = [];
                if (data && data.id) {
                    ids.push(data.id);
                } else {
                    let checkStatus = table.checkStatus('test');
                    data = checkStatus.data;
                    for (let i = 0; i < data.length; i++) {
                        ids.push(data[i].id);
                    }
                }
                if (ids.length === 0) {
                    layer.msg("未选中任何数据", {icon: 2});
                    return;
                }
                layer.confirm('确定删除选中的' + ids.length + '条数据吗 ？', {
                    icon: 3,
                    // offset:['18%','34%'],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        layer.close(index);
                        layer.msg('正在操作, 请稍后......', {shade: 0.01, time: 0});
                        request.bodyAjax(api.consoleNodeDelete, ids, function (res) {
                            if (res.status === 200) {
                                tableIns.reload();
                            }
                            layer.msg(res.message);
                        });
                    }
                });
            }
        };

        /*active.loadTypes();

        form.on('select(dicType)', function (data) {
            tableIns.reload({
                where: {
                    fDictionarytypeid: data.value
                }
            });
        });*/

        // 表头按钮的监听
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (active[obj.event]) {
                active[obj.event](obj);
            }
        });

        // 表格管理操作列的点击
        table.on('tool(test)', function (obj) {
            let layEvent = obj.event;
            let action = active[layEvent];
            if (action) {
                action(obj.data);
            }
        });
    });
</script>
